<extend name="Public/base" />
<block name="content">
    <div style="margin-top:2%;padding-left:35%">
        <button onclick="add()" class="button tiny addTeacherss">添加菜单</button>&nbsp;&nbsp;&nbsp;
        <button onclick="unSelect()" class="button tiny">反选</button>&nbsp;&nbsp;&nbsp;
        <button onclick="delLot()" class="button tiny">删除(批量)</button>
    </div>
    <table id="teacherTbl" style="margin-left: 10%">
        <thead >
            <th><input  onclick="selectAll(this)" type="checkbox" ></th>
            <th style="text-align: center;width:4rem">编号</th>
            <th style="text-align: center;width:12rem">教师姓名</th>
            <th style="text-align: center;width:12rem">教师电话</th>
            <th style="text-align: center;width:12rem">教师邮箱</th>
            <th style="text-align: center;width:8rem"> 操作</th>
        </thead>

        <tbody id="tbodys">
        <volist name="navs" id="nav">
            <tr id="row_<{$nav.teacher_id}>">
                <td><input class="slct" type="checkbox" value="<{$nav.teacher_id}>"></td>
                <td><{$nav.dict_id}></td>
                <td><input name="tname" style="height:25px" class="es" disabled type="text" value="<{$nav.tname}>"></td>
                <td><input name="mtel" style="height:25px" class="es" disabled type="text" value="<{$nav.mtel}>"></td>
                <td><input name="email" style="height:25px" class="es" disabled style="width:4em;" type="email" value="<{$nav.email}>"></td>
                <td>
                    <button onclick="edit('row_<{$nav.teacher_id}>')" class="button tiny edit radius" style="height:25px;line-height:6px">编辑</button>
                    <button onclick="save('<{$nav.teacher_id}>')" style="display: none;height:25px;line-height:6px" class="button tiny save radius">保存</button>
                </td>
            </tr>
        </volist>
        </tbody>
    </table>
    <div id="page"  style="text-align:center">
        <for start="1" end="$pages+1" >
            <span data-val="<{$i}>" style="cursor:pointer"><{$i}>&nbsp;&nbsp;</span>
        </for>
    </div>
    <script>
        //全选
        function selectAll(obj) {
            $('#teacherTbl tbody .slct').prop('checked',$(obj).prop('checked'));
        }
        //反选
        function unSelect() {
            $('#teacherTbl tbody .slct').map(function(){
                $(this).prop('checked',!$(this).prop('checked'));
            });
        }

        //批量删除
        function delLot() {
           if($('#teacherTbl tbody .slct:checked')['length']){
            if(confirm('确定删除吗?')){
            var ids = $('#teacherTbl tbody .slct:checked').map(function () {
                $(this).parent().parent().remove();
                return $(this).val();
            });
            ids  = ids.get().join();
            $.post('<{:U("doDelTeacher")}>',{ids:ids},function (data) {
                alert(data.msg);
            });
        }}}
        //修改
        function edit(rowid) {
            $('#'+rowid+' .es').prop('disabled',false);
            $('#'+rowid+' .edit').hide();
            $('#'+rowid+' .save').show();
        }
        //修改保存
        function save(id) {
            $('#row_'+id+' .es').prop('disabled',true);
            $('#row_'+id+' .edit').show();
            $('#row_'+id+' .save').hide();
            var data = {
                teacher_id:id,
                tname:$('#row_'+id+' [name=tname').val(),
                mtel:  $('#row_'+id+' [name=mtel]').val(),
                email :  $('#row_'+id+' [name=email]').val(),
            }

            $.post('<{:U("doEditTeacher")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);
                }
            });

        }
        //添加
        function add(){
            newRows="<tr id='addsss'>"
                            +"<td></td>"
                            +"<td></td>"
                            +"<td><input class='tnameAdd' style='height:25px' class='es' type='text'></td>"
                            +"<td><input class='mtelAdd' style='height:25px' class='es' type='text'></td>"
                            +"<td><input class='emailAdd' style='height:25px'  style='width:4em;' type='email' ></td>"
                            +"<td>"
                            +"<button onclick='addTeachers()' class='button tiny edit radius' style='height:25px;line-height:6px'>添加</button><br />"
                            +"<button onclick='canelAddTeachers()' class='button tiny edit radius' style='height:25px;line-height:6px'>取消</button>"
                            +"</td>"
                            +"</tr>"
            ;
            $("#teacherTbl").append(newRows);
            $('.addTeacherss').hide();
        }
        function canelAddTeachers(){
            $('#addsss').remove();
            $('.addTeacherss').show();
        }
        function addTeachers(){
            var data = {
                tname:$('.tnameAdd').val(),
                mtel:  $('.mtelAdd').val(),
                email:  $('.emailAdd').val(),
            }

            $.post('<{:U("doAddTeacher")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);

                }
            });
            $('#addsss').remove();
            $('.addTeacherss').show();
        }
        //分页
        $('#page span').click( function () {
            var pagenum = $(this).attr('data-val');
            $.get('<{:U("getShow")}>',{p:pagenum},function (data) {
                var html='';
                for(var i in data){
                    html +='<tr id="row_'+data[i].teacher_id+'">'
                            +'<td><input class="slct" type="checkbox" value="'+data[i].teacher_id+'"></td>'
                            +'<td>'+data[i].teacher_id+'</td>'
                            +'<td>'
                            +'<input name="tname" style="height:25px" class="es" disabled type="text" value="'+data[i].tname+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="mtel" style="height:25px" class="es" disabled type="text" value="'+data[i].mtel+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="email" style="height:25px" class="es" disabled style="width:4em;" type="email" value="'+data[i].email+'">'
                            +'</td>'
                            +'<td>'
                            +'<button onclick="edit('+"'row_"+data[i].teacher_id+"'"+')" class="button tiny edit radius" style="height:25px;line-height:6px">编辑</button>'
                            +'<button onclick="save('+"'"+data[i].teacher_id+"'"+')" style="display: none;height:25px;line-height:6px" class="button tiny save radius">保存</button>'
                            +'</td>'
                            +'</tr>'
                    ;
                }
                $('#teacherTbl #tbodys').html(html);
            });
        } );
    </script>
</block>